<template>
  <div>
    <!--查询区域-->

    <!--引用表格-->
    <BasicTable @register="registerTable">
      <!--插槽:table标题-->
      <template #tableTitle>
        <a-button type="primary" @click="handleAdd" :disabled="addBtnDisabled" preIcon="ant-design:plus-outlined"> 生成银行账户</a-button>
        <span v-if="businessInfo.name" style="font-size: 18px;margin-left: 50px;">户名：{{businessInfo.name}}</span>
      </template>
      <!--操作栏-->
      <template #action="{ record }" v-if="!addBtnDisabled">
        <TableAction :actions="getTableAction(record)" />
      </template>

      <!--打款信息插槽-->
      <template #accountSlot="{ record }">
        <div style="text-align: left;">
          <p>打款账户：<span style="font-weight: bold;">{{record.account}}</span></p>
          <p>打款开户行：<span style="font-weight: bold;">{{record.bankName}}</span></p>
          <p>打款户名：<span style="font-weight: bold;">{{record.name}}</span></p>
        </div>
      </template>

    </BasicTable>
    <!-- 表单区域 -->
    <CaishuiBusinessBankModal ref="registerModal" @success="handleSuccess"></CaishuiBusinessBankModal>
  </div>
</template>

<script lang="ts" name="caishuiBusinessBank-caishuiBusinessBank" setup>
  import { ref, reactive, watchEffect } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { useListPage } from '/@/hooks/system/useListPage';
  import { columns } from './CaishuiBusinessBank.data';
  import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from './CaishuiBusinessBank.api';
  import { downloadFile } from '/@/utils/common/renderUtils';
  import CaishuiBusinessBankModal from './components/CaishuiBusinessBankModal.vue'

  const queryParam = ref<any>({});
  const registerModal = ref();
  const exportIconLoading = ref<boolean>(false);
  const addBtnDisabled = ref<boolean>(true);

  const props = defineProps({
    formDisabled:{
      type: Boolean,
      default: false
    },
    businessInfo:{
      type: Object,
      default: null
    },
  })

  // businessId数据改变
  watchEffect(() => {
    let id = "0";
    if(props.businessInfo && props.businessInfo.id && props.businessInfo.id != '0'){
      id = props.businessInfo.id
    }
    queryParam.value.businessId = id;
    if(id && id != '0'){
      addBtnDisabled.value = false;
    }else {
      addBtnDisabled.value = true;
    }
    if (props.formDisabled){
      addBtnDisabled.value = true;
    }
  });

  //注册table数据
  const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
    tableProps: {
      title: '商户银行账户',
      api: list,
      columns,
      canResize:false,
      useSearchForm: false,
      striped: true,
      showIndexColumn: false,
      ellipsis: false,
      immediate: false,//首次加载页面不加载列表数据
      actionColumn: {
        width: 80,
        fixed: 'right',
      },
      beforeFetch: (params) => {
        return Object.assign(params, queryParam.value);
      },
    },
    exportConfig: {
      name: "商户银行账户",
      url: getExportUrl,
      success: exportXlsSuccess
    },
	  importConfig: {
	    url: getImportUrl,
	    success: handleSuccess
	  },
  });
  const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;
  const labelCol = reactive({
    xs: { span: 24 },
    sm: { span: 7 },
  });
  const wrapperCol = reactive({
    xs: { span: 24 },
    sm: { span: 16 },
  });

  /**
   * 新增事件
   */
  function handleAdd() {
    registerModal.value.disableSubmit = false;
    registerModal.value.add({businessId: props.businessInfo.id, accountName: props.businessInfo.name});
  }
  
  /**
   * 编辑事件
   */
  function handleEdit(record: Recordable) {
    registerModal.value.disableSubmit = false;
    registerModal.value.edit(record);
  }
   
  /**
   * 详情
   */
  function handleDetail(record: Recordable) {
    registerModal.value.disableSubmit = true;
    registerModal.value.edit(record);
  }
   
  /**
   * 删除事件
   */
  async function handleDelete(record) {
    await deleteOne({ id: record.id }, handleSuccess);
  }
   
  /**
   * 批量删除事件
   */
  async function batchHandleDelete() {
    await batchDelete({ ids: selectedRowKeys.value }, handleSuccess);
  }
   
  /**
   * 成功回调
   */
  function handleSuccess() {
    (selectedRowKeys.value = []) && reload();
  }
   
  /**
   * 操作栏
   */
  function getTableAction(record) {
    return [
      {
        label: '设置税率',
        icon: 'ant-design:setting-outlined',
        onClick: handleEdit.bind(null, record),
      },
    ];
  }

  /**
   * 查询
   */
  const searchQuery = () => {
    reload();
  }
  
  /**
   * 重置
   */
  function searchReset() {
    queryParam.value = {};
    selectedRowKeys.value = [];
    //刷新数据
    reload();
  }

  /**
   * 导出
   */
  function handleExportXls() {
    exportIconLoading.value = true;
    onExportXls();
  }

  /**
   * 导出成功回调
   */
  function exportXlsSuccess(data) {
    exportIconLoading.value = false;
  }

  // 将这个方法暴露出去,这样父组件就可以使用了
  defineExpose({
    searchQuery,
  })
</script>

<style lang="less" scoped>
  .jeecg-basic-table-form-container {
    margin-bottom: -10px;
    .table-page-search-submitButtons {
      display: block;
      white-space: nowrap;
    }
    .query-group-cust{
      width: calc(50% - 15px);
      min-width: 100px !important;
    }
    .query-group-split-cust{
      width: 30px;
      display: inline-block;
      text-align: center
    }
  }
</style>
